import React from 'react';
import {connect} from 'dva';
import PropTypes from 'prop-types';
import {Link} from 'dva/router'
import {Table, Button,Row,Col,Icon,Layout, Breadcrumb,Input,DatePicker,Dropdown,Popconfirm, Menu,Checkbox,Card,message} from 'antd';
import style from '../../styles/TableCss.less';
import reqwest from 'reqwest';
import ApplyStyle from './Apply.less';
// import TopUpBoxAmt from './components/TopUpBpxAmt.js'
// console.log(PublicCustomer)
const {  Content, Footer ,Sider} = Layout;
// const { RangePicker } = DatePicker;
function onChange(value, dateString) {
  console.log('Selected Time: ', value);
  console.log('Formatted Selected Time: ', dateString);
}
function onOk(value) {
  console.log('onOk: ', value);
}
function removeByValue(arr, val) {
  for(var i=0; i<arr.length; i++) {
    if(arr[i] == val) {
      arr.splice(i, 1);
      break;
    }
  }
}
Array.prototype.indexOf = function(val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == val) return i;
    }
    return -1;
};
Array.prototype.remove = function(val) {
    var index = this.indexOf(val);
    if (index > -1) {
        this.splice(index, 1);
    }
};
Array.prototype.unique1 = function(){
 var res = [this[0]];
 for(var i = 1; i < this.length; i++){
  var repeat = false;
  for(var j = 0; j < res.length; j++){
   if(this[i] == res[j]){
    repeat = true;
    break;
   }
  }
  if(!repeat){
   res.push(this[i]);
  }
 }
 return res;
}
class Apply extends React.Component{
	constructor(props){
		super(props);
		this.state={
			list:window.sessionStorage['apply']==null?null:JSON.parse(window.sessionStorage['apply']),
			apply:[],
			data: [],
		    pagination: {},
		    loading: false,
	      selectedRowKeys: [],
	      dropDown:'所有客户',
	      columns :[{
				  title: '品牌',
				  dataIndex: 'name',
				  // sorter: true,
				  width: '20%',
				}, {
				  title: '管理员',
				  dataIndex: 'admin',
				  // filters: [
				  //   { text: 'Male', value: 'male' },
				  //   { text: 'Female', value: 'female' },
				  // ],
				  width: '20%',
				}, {
				  title: '手机号',
				  dataIndex: 'mobile',
				}, {
				  title: '动作',
				  key: 'action',
				  render: (text, record) => (
				    <span>
				      <Link to={{pathname:'/app/newan',query:{ims:record.key,'current':this.props.location.query.current,name:record.name,}}}>编辑</Link>
				     
				    </span>
				  ),
				}]
		}
	}
		// <Popconfirm title="确认删除吗?" onConfirm={(e) => this.onDelete(record.key, e,this)}>
				      // <span className="ant-divider" />
				     		// <a>删除</a>
		// 		     	</Popconfirm>
	onDelete(key,e,_this){
    const data = _this.state.data.filter(item => item.key !== key);
    _this.setState({data });
  }
	handleTableChange(pagination, filters, sorter){
    const pager = { ...this.state.pagination };
    // console.log(pagination.current)
    pager.current = pagination.current;
    this.setState({
      pagination: pager,
    });
    this.fetch({
      results: pagination.pageSize,
      page: pagination.current,
      sortField: sorter.field,
      sortOrder: sorter.order,
      ...filters,
    });
  }
  fetch (params = {}) {
    console.log('params:', this.state.apply);
    let _data=[];
    let _this = this;
    reqwest({
      url: window.host+'/api/accounts/apply_co_companies',
      method: 'post',
      crossOrigin: true,
      data: {
        access_token:localStorage['token'],
        company_ids:_this.state.apply,
      },
      type: 'json',
    }).then((data) => {
    	if(data.status=='success'){
	    	message.success(data.msg,1,()=>{
	    		window.location.hash='/app/dealer?current='+_this.props.location.query.current;
	    	});
	    }
    });
  }
	componentWillMount(){
		console.log(window.localStorage['account_type'])
	}
	handleCardChange(e){
		let _arr = this.state.apply;
    if(e.target.checked){
      _arr.push(e.target.value);
      this.setState({apply:_arr});
      console.log(this.state.apply.unique1())
    }else{
      _arr.remove(e.target.value)
      this.setState({apply:_arr});
    }
    // console.log(!this.state.apply.indexOf(e.target.value))
	}
	menuClick(e){
		console.log(e.item.props.value)
		this.setState({dropDown:e.item.props.value});
	}
	componentDidMount(){

	}
	render(){
		let _this =this
		let _indexOf=null;
		const _card = this.state.list.map(function(data){
			_indexOf = _this.state.apply.indexOf(data.value)
			console.log(_indexOf)
      return <Col   style={{marginBottom:'30px'}} key={'c'+data.id} span={7} offset={1}>
      <Checkbox className={`${ApplyStyle.label_checkbox}`}  value={data.id} key={data.id} onChange={_this.handleCardChange.bind(_this)}>
        <Card  key={'a'+data.id}  title={data.name} ><img style={{height:'100px'}} src={data.logo}/></Card>
      </Checkbox>
      </Col>
    })

		return(
			<Layout style={{background:'#fff',height:'100%'}}>
				<Row style={{boxShadow:'0px 0px 8px rgba(0,0,0,0.3)'}}>
          <Col  sm={{span:7,offset:0}} xs={{span:9}} style={{padding:'24px 25px 24px'}}>
						关联品牌
					</Col>
					<Col xl={{span :3,offset:13}} lg={{span:3,offset:13}} md={{span:3,offset:13}} sm={{span:3,offset:13}} xs={{span:2,offset:12}} style={{lineHeight:'60px',textAlign:'right'}}>
						<Button type='primary' onClick={this.fetch.bind(this)}>关联</Button>
          </Col>
				</Row>
				
					<Row  style={{ padding: '30px'}}>
						{_card}
					</Row>
				<Row style={{textAlign:'center'}}>
					
				</Row>
			</Layout>	
		)
	}
}
// rowSelection={rowSelection} 批量删除

Apply.PropTypes={

}
export default connect()(Apply);